<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>路径管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row style="margin: 12px 0; display: flex">
        <el-button icon="el-icon-plus" size="small" @click="openAddUrl">添加路径
        </el-button>
      </el-row>

      <el-table :data="urls" height="640" style="width: 100%" :border="true" :stripe="true"
        :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
        <el-table-column width="50" label="编号" prop="urlId" align="center"></el-table-column>
        <el-table-column label="页面名" prop="urlName" align="center"></el-table-column>
        <el-table-column label="路径" prop="urlLujing" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.urlDetail == ""
                ? ""
                : scope.row.urlDetail == 0
                  ? "总后台"
                  : scope.row.urlDetail == 1
                    ? "通用"
                    : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" size="small" @click="openUpdateUrl(scope.row)">修改</el-button>
            <el-button icon="el-icon-delete" size="small" @click="drupUrl(scope.row.urlId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
				:page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount">
			</el-pagination> -->

      <el-dialog title="修改路径" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" @close="cleaUrl" width="500px">
        <el-form :model="url" :rules="rules" ref="updateUrl" label-width="80px">
          <el-form-item label="编号">
            <el-input v-model="url.urlId" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="页面名" prop="urlName">
            <el-input v-model="url.urlName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="urlLujing">
            <el-input v-model="url.urlLujing" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="urlDetail">
            <el-select v-model="url.urlDetail" placeholder="选择状态">
              <el-option label="总后台" value="0"></el-option>
              <el-option label="通用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button @click="updateUrl()">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="添加路径" v-model="url" :rules="rules" :visible.sync="addFormVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" @close="cleaAddUrl" width="500px">
        <el-form :model="url" :rules="rules" ref="addUrl" label-width="80px">
          <el-form-item label="页面名" prop="urlName">
            <el-input v-model="url.urlName" autocomplete="off" prop="name"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="url_lujing">
            <el-input v-model="url.urlLujing" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="urlDetail">
            <el-select v-model="url.urlDetail" placeholder="选择状态">
              <el-option label="总后台" value="0"></el-option>
              <el-option label="通用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button @click="addUrl()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getUrl, drupUrl, addUrl, updateUrl } from "network/url";

export default {
  data() {
    return {
      urls: [],
      url: {
        urlId: "",
        urlName: "",
        urlLujing: "",
        urlDetail: "",
      },

      dialogFormVisible: false,
      addFormVisible: false,
      pageSize: 20,
      pageNumber: 1,
      totalCount: 0,
      rules: {
        urlName: [
          {
            required: true,
            message: "请输入路径名称",
            trigger: "blur",
          },
        ],
        urlLujing: [
          {
            required: true,
            message: "请输入路径",
            trigger: "blur",
          },
        ],
        urlDetail: [
          {
            required: true,
            message: "请选择一项",
            trigger: "change",
          },
        ],
      },
    };
  },
  comments: {},
  methods: {
    //加载url列表
    getAllUrl() {
      console.log("显示" + this.pageSize + "页数" + this.pageNumber);
      getUrl({
        shopId: sessionStorage.shop_id,
      }).then((res) => {
        console.log(res);
        if (res.flag) {
          this.urls = res.data;
        }
      });
    },
    //打开添加页面
    openAddUrl() {
      this.url = {
        urlId: "",
        urlName: "",
        urlLujing: "",
        urlDetail: "",
      };

      this.addFormVisible = true;
    },
    //删除路径
    drupUrl(url_id) {
      this.$confirm("此操作将永久删除该路径, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          drupUrl({
            urlId: url_id,
            managerName: sessionStorage.manager_name,
          }).then((res) => {
            console.log(res);
            if (res.flag) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getAllUrl();
            } else {
              this.$message({
                message: "删除失败请联系管理!",
                type: "warning",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //打开修改页面
    openUpdateUrl(rowData) {
      this.dialogFormVisible = true;
      this.url.urlId = rowData.urlId;
      this.url.urlName = rowData.urlName;
      this.url.urlDetail = rowData.urlDetail;
      this.url.urlLujing = rowData.urlLujing;
    },
    // 新增
    addUrl() {
      this.$refs["addUrl"].validate((valid) => {
        if (valid) {
          this.url.managerName = sessionStorage.manager_name;
          console.log(this.url);
          addUrl(this.url)
            .then((res) => {
              if (res.flag) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.getAllUrl();
                this.dialogFormVisible = false;
                this.addFormVisible = false;
              } else {
                this.$message({
                  message: "添加失败请联系管理!",
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return console.log("update Err");
        }
      });
    },
    // 更新
    updateUrl() {
      this.$refs["updateUrl"].validate((valid) => {
        if (valid) {
          this.url.managerName = sessionStorage.manager_name;
          console.log(this.url);
          updateUrl(this.url)
            .then((res) => {
              if (res.flag) {
                this.$message({
                  type: "success",
                  message: "修改成功",
                });
                this.getAllUrl();
                this.dialogFormVisible = false;
                this.addFormVisible = false;
              } else {
                this.$message({
                  message: "修改失败请联系管理!",
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return console.log("update Err");
        }
      });
    },

    //清空更新数据
    cleaUrl() {
      this.url.urlDetail = "";
      this.url.urlId = "";
      this.url.urlName = "";
      this.url.urlLujing = "";
      this.$refs["updateUrl"].resetFields();
    },
    cleaAddUrl() {
      this.url.urlName = "";
      this.url.urlLujing = "";
      this.url.urlDetail = "";
      this.$refs["addUrl"].resetFields();
    },
    //每页条数改变
    handleSizeChange(val) {
      console.log("每页" + val);
      this.pageSize = val;
      this.getAllUrl();
    },
    //页数改变
    handleCurrentChange(val) {
      this.pageNumber = val;
      console.log(`当前页: ${val}`);
      this.getAllUrl();
    },
  },
  created() {
    this.getAllUrl();
  },
};
</script>

<style scoped></style>
